<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="24" :xs="24">

                <el-table :data="leaveList" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column prop="driverId" label="驾驶员id" align="center" width="170px" />
                    <el-table-column prop="driverName" label="姓名" align="center" width="100px" />
                    <el-table-column prop="driverPhone" label="手机号" align="center" width="120px" />
                    <el-table-column prop="leaveDate" label="请假日期" align="center" width="110px" />
                    <el-table-column prop="leaveRemark" label="请假事由" align="center" width="110px" />
                    <el-table-column prop="applyDate" label="申请日期" align="center" width="110px" />
                    <el-table-column prop="agreeFlag" label="审核状态" align="center" :formatter="agreeFlagFormatter"
                        width="90px" />
                    <!-- <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(scope.row)"
              />
            </template>
</el-table-column> -->


                    <el-table-column label="操作" align="center" width="280" class-name="small-padding fixed-width">
                        <template v-if="scope.row.id !== 1" slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit"
                                @click="handleAgreeLeave(scope.row)">审核通过</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete"
                                @click="handleNotAgreeLeave(scope.row)">审核不通过</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-pagination :page-size.sync="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total" :page-sizes="[10, 20, 30, 40]" :current-page.sync="queryParams.pageNum"
            @current-change="handleCurrentChange" @size-change="handleCurrentChange" />
        <!-- 添加或修改参数配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" placeholder="请输入姓名" maxlength="11" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="form.password" placeholder="请输入密码" maxlength="20" type="password" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="职位" prop="position">
                            <el-input v-model="form.position" placeholder="请输入职位" maxlength="50" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户性别" prop="sex">
                            <el-select v-model="form.sex" placeholder="请选择" :rules="sex">
                                <el-option :key="'1'" label="男" :value="'1'" />
                                <el-option :key="'0'" label="女" :value="'0'" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证" prop="idCard">
                            <el-input v-model="form.idCard" placeholder="请输入身份证号" maxlength="50" />
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>




        <!-- 驾驶证配置对话框 -->
        <el-dialog :title="title" :visible.sync="licenseOpen" width="600px" append-to-body>
            <el-form ref="form2" :model="form2" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="有效期" prop="validityTime">
                            <el-input v-model="form2.validityTime" placeholder="请输入有效期" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="驾照类型" prop="carType">
                            <el-input v-model="form2.carType" placeholder="请输入驾照类型" maxlength="11" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="发证单位" prop="issueUnit">
                            <el-input v-model="form2.issueUnit" placeholder="请输入发证单位" maxlength="20" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="图片" prop="licenseImage">
                            <template v-if="form2.licenseImage">
                                <div>
                                    <el-image v-if="form2.licenseImage" style="width: 400px; height: 260px"
                                        :src="form2.licenseImage" :fit="fit"></el-image>
                                    <button @click="deleteImage" v-if="form2.licenseImage">删除图片</button>
                                </div>
                            </template>
                            <template v-else>
                                <el-upload class="upload-demo" action="http://localhost:8887/api/v1/oss/uploadImg"
                                    :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess"
                                    name="img" list-type="picture">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>
                            </template>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="licenseSubmitForm">确 定</el-button>
                <el-button @click="licenseCancel">关 闭</el-button>
            </div>
        </el-dialog>







    </div>
</template>

<script>
import { searchUser, changeUserStatus, delUser, getUserById, updateUser } from '@/api/system/user';
import { getDriverLicense, updateLicense } from '@/api/system/license';
import { searchScheduleList, searchLeaveList, agreeLeave, notAgreeLeave } from '@/api/system/schedule'

export default {
    name: 'User',
    data() {
        return {
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,

            },
            title: '',
            // 是否显示弹出层
            open: false,
            // 表单校验
            rules: {
                phone: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                    {
                        min: 2,
                        max: 20,
                        message: '用户名称长度必须介于 2 和 20 之间',
                        trigger: 'blur'
                    }
                ],
                name: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '用户密码不能为空', trigger: 'blur' }
                ],
                position: [
                    { required: true, message: '用户职位不能为空', trigger: 'blur' }
                ],
                idCard: [
                    { required: true, message: '身份证号不能为空', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '性别不能为空', trigger: 'blur' }
                ],

            },
            // 角色选项
            roleOptions: [],
            // 显示搜索条件
            showSearch: true,
            // 遮罩层
            loading: true,
            // 用户表格数据
            userList: null,
            // 总条数
            total: 0,
            // 选中数组
            ids: [],
            // 表单参数
            form: {},
            form2: {},
            phone: "",
            name: "",
            email: "",
            status: "",
            leaveList: [],
            UserList: []
        }
    },
    watch: {},
    created() {
        this.search(1, this.queryParams.pageSize);
    },
    methods: {
        agreeFlagFormatter(row, index) {
            if (row.agreeFlag == 0) {
                return "未审核";
            }
            else if (row.agreeFlag == 1) {
                return "审核通过";
            }
            else if (row.agreeFlag == 2) {
                return "审核不通过";
            }
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.loading = true;
            this.search(1, this.queryParams.pageSize);
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        licenseCancel() {
            this.licenseOpen = false
            this.licenseReset()
        },
        /** 查询用户列表 */
        search(page, size) {
            console.log("-----------------------------");
            console.log(page);
            console.log(size);
            this.loading = true;
            searchLeaveList(page, size).then((response) => {
                this.leaveList = response.rows;
                this.total = response.total;
                this.loading = false;

            });
        },
        // 用户状态修改
        // handleStatusChange(row) {
        //   const text = row.status === '0' ? '启用' : '停用'
        //   this.$modal
        //     .confirm('确认要"' + text + '""' + row.username + '"用户吗？')
        //     .then(function () {
        //       return changeUserStatus(row.id, row.status)
        //     })
        //     .then(() => {
        //       this.$modal.msgSuccess(text + '成功')
        //     })
        //     .catch(function () {
        //       row.status = row.status === '0' ? '1' : '0'
        //     })
        // },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            this.title = '修改用户信息';
            this.open = true
            console.log(row.id)
            getUserById(row.id).then((response) => {
                this.form.phone = response.phone;
                this.form.sex = response.sex;
                this.form.id = response.id;
                this.form.name = response.name;
                this.form.position = response.position;
                this.form.password = response.password;
                this.form.idCard = response.idCard;
                console.log(response)
            });
        },
        handleDriverLicense(row) {
            this.licenseReset()
            this.title = '驾驶证详情';
            this.licenseOpen = true;
            getDriverLicense(row.id).then((response) => {
                this.form2.id = response.id;
                this.form2.driverId = response.driverId;
                this.form2.validityTime = response.validityTime;
                this.form2.carType = response.carType;
                this.form2.issueUnit = response.issueUnit;
                this.form2.licenseImage = response.licenseImage;
                this.imageUrl = response.licenseImage;
                console.log(this.form2.driverId)
            })
        },
        licenseReset() {
            this.imageUrl = undefined,
                this.form2 = {
                    id: undefined,
                    validityTime: undefined,
                    carType: undefined,
                    issueUnit: undefined,
                    licenseImage: undefined,
                }
            this.resetForm('form2')
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                phone: undefined,
                name: undefined,
                password: undefined,
                position: undefined,
                idCard: undefined,
                sex: undefined,
            }
            this.resetForm('form')
        },
        /** 新增用户 */
        handleAdd() {
            this.reset();
            // 初始化表单数据
            this.form = {
                phone: '',
                sex: '',
                id: '',
                name: '',
                position: '',
                password: ''
            };
            // 设置对话框标题
            this.title = '添加用户';
            // 打开对话框
            this.open = true;
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = this.ids
            this.$modal
                .confirm('是否确认删除用户编号为"' + ids + '"的数据项？')
                .then(function () {
                    var i = 0;
                    while (ids[i + 1]) {
                        delUser(ids[i])
                        i = i + 1;
                    }
                    return delUser(ids[i])

                })
                .then(() => {
                    this.queryParams.pageNum = 1;
                    this.search(1, this.queryParams.pageSize)
                    this.$modal.msgSuccess('删除成功');
                })
                .catch(() => { })
        },
        handleAgreeLeave(row) {
            this.$modal
                .confirm('是否确认通过编号为"' + row.id + '"的数据项？')
                .then(function () {
                    return agreeLeave(row.id);
                })
                .then(() => {
                    this.queryParams.pageNum = 1;
                    this.search(1, this.queryParams.pageSize)
                    this.$modal.msgSuccess('审核通过');
                })
                .catch(() => { })
        },
        handleNotAgreeLeave(row) {
            this.$modal
                .confirm('是否确认驳回编号为"' + row.id + '"的数据项？')
                .then(function () {
                    return notAgreeLeave(row.id);
                })
                .then(() => {
                    this.queryParams.pageNum = 1;
                    this.search(1, this.queryParams.pageSize)
                    this.$modal.msgSuccess('审核不通过');
                })
                .catch(() => { })
        },
        handleCurrentChange() {
            this.search(this.queryParams.pageNum, this.queryParams.pageSize);
        },

        licenseSubmitForm: function () {
            this.$refs["form2"].validate((valid) => {
                if (valid) {
                    this.open = false;
                    console.log(this.form2.driverId);
                    updateLicense(this.form2.id, this.form2.driverId, this.form2.validityTime, this.form2.carType, this.form2.issueUnit, this.imageUrl).then((response) => {
                        this.$modal.msgSuccess('修改成功');
                        this.open = false;
                    });
                }
            });
        },
        handleSuccess(res, file) {
            console.log(res)
            this.imageUrl = res.data
            sessionStorage.setItem("imgUrl", this.imageUrl)
            alert(this.imageUrl)
        },
        deleteImage() {
            // 执行删除图片的逻辑
            this.form2.licenseImage = undefined; // 或者设置为其他的默认值或空字符串
        }
    }
}
</script>
